<template>
    <div class="notice">
        <div class="noticeType">
            <el-form ref="noticeForm" :rules="rules" :model="noticeForm" label-position="right" label-width="120px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="通知方式" prop="type">
                            <el-select v-model="noticeForm.type" placeholder="请通知种类">
                                <el-option label="放假通知" value="放假通知"></el-option>
                                <el-option label="家长会通知" value="家长会通知"></el-option>
                                <el-option label="教师会通知" value="教师会通知"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="通知标题" label-width="120px">
                            <el-input v-model="noticeForm.title" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="发起人学校">
                            <el-input v-model="noticeForm.school" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="发起人姓名" label-width="120px">
                            <el-input v-model="noticeForm.teacher" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="放假原因">
                            <el-input v-model="noticeForm.reason" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="会议地点">
                            <el-input v-model="noticeForm.address" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="通知内容" prop="remork">
                            <el-input type="textarea" :rows="2" v-model="noticeForm.remork" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div style="text-align: center">
            <el-transfer style="text-align: left; display: inline-block" 
                v-model="checked" 
                filterable
                :left-default-checked="[]" 
                :right-default-checked="[]" 
                :titles="['未选班级', '已选班级']"
                :button-texts="['到左边', '到右边']" 
                :format="{ noChecked: '${total}', hasChecked: '${checked}/${total}'}"
                @change="handleChange"
                :data="transferData">
                <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
                <el-button class="transfer-footer" @click="noticeClear" slot="left-footer" size="small">取消</el-button>
                <el-button class="transfer-footer" @click="test1('noticeForm')" type="primary" slot="right-footer" size="small">确认</el-button>
            </el-transfer>
        </div>
    </div>
</template>
<script>
import { GETCLAZZ, SENDMSG } from '@/api/api.js'
import { mapState } from 'vuex'
    export default {
        name: 'notice',
        data() {
            return {
                transferData: [],
                value: [],
                checked: [],
                renderFunc(h, option) {
                    return <span> {
                        option.key
                    } - {
                        option.label
                    } </span>;
                },
                noticeForm: {
                    type: '', // 类型
                    title: '',
                    school: '',
                    teacher: '',
                    reason: '',
                    address: '',
                    remork: ''
                },
                rules: {
                    type: [
                        { required: true, message: '请选择通知类型', trigger: 'change' }
                    ],
                    remork: [
                        { required: true, message: '请输入通知内容', trigger: 'blur' }
                    ]
                }
            };
        },
        computed: {
            ...mapState({
                schoolId: state => state.schoolId
            })
        },
        created() {
            setTimeout(() => {
                this.getClazz()
            }, 100);
        },
        methods: {
            async getClazz() {
                await this.$GET(`${GETCLAZZ}`, {
                    schoolId: this.schoolId
                })
                .then(res => {
                    console.log(res.data)
                    const allData = res.data
                    const data = []
                    for (let i = 0; i < allData.length; i++) {
                        data.push({
                            key: `${allData[i].classId}`,
                            label: `${allData[i].className}`,
                        })
                    }
                    this.transferData = data
                })
            },
            handleChange(value, direction, movedKeys) {
                // console.log(value, direction, movedKeys);
            },
            noticeClear() {
                this.value4 = []
            },
            // 模板推送
            async test1(formName) {
                let that = this
                that.$refs[formName].validate(async (valid) => {
                    if(valid) {
                        // 模板id
                        let templateId = ''
                        // 模板信息
                        let data = {}
                        switch (this.noticeForm.type) {
                            case '放假通知':
                                templateId = `O7sYmfQ0izLhciwqQLxh3kgngUGM49fX8LUKTeocvNQ`
                                data = {
                                    first: {
                                        value: this.noticeForm.title,
                                        color: '#409EFF'
                                    },
                                    noticeSender: {
                                        value: this.noticeForm.teacher,
                                        color: '#409EFF'
                                    },
                                    time: {
                                        value: this.$moment().format('YYYY MMM Do'),
                                        color: '#409EFF'
                                    },
                                    reason: {
                                        value: this.noticeForm.reason,
                                        color: '#409EFF'
                                    },
                                    remork: {
                                        value: this.noticeForm.remork,
                                        color: '#409EFF'
                                    }
                                }
                                break;
                            case '家长会通知':
                                templateId = `r4XbO1UEUdzEql8ZBBKBBzNo4zf0TF212Hjlhc2zdEM`
                                data = {
                                    first: {
                                        value: this.noticeForm.title,
                                        color: '#409EFF'
                                    },
                                    date: {
                                        value: this.noticeForm.school,
                                        color: '#409EFF'
                                    },
                                    class: {
                                        value: this.$moment().format('YYYY MMM Do'),
                                        color: '#409EFF'
                                    },
                                    type: {
                                        value: this.noticeForm.address,
                                        color: '#409EFF'
                                    },
                                    remork: {
                                        value: this.noticeForm.remork,
                                        color: '#409EFF'
                                    }
                                }
                                break;
                            case '教师会通知':
                                templateId = `iiDDpLINbmtEyO2evyzOaUSqyuX3jlCuVuUn0-M8qQU`
                                data = {
                                    first: {
                                        value: this.noticeForm.title,
                                        color: '#409EFF'
                                    },
                                    date: {
                                        value: this.noticeForm.school,
                                        color: '#409EFF'
                                    },
                                    class: {
                                        value: this.$moment().format('YYYY MMM Do'),
                                        color: '#409EFF'
                                    },
                                    type: {
                                        value: this.noticeForm.address,
                                        color: '#409EFF'
                                    },
                                    remork: {
                                        value: this.noticeForm.remork,
                                        color: '#409EFF'
                                    }
                                }
                                break;
                        }
                        let fd = new FormData()
                        fd.append("templateId", templateId)
                        fd.append("data", JSON.stringify(data))
                        fd.append("classIds", Array(this.checked))
                        await that.$POST(`${SENDMSG}`, fd)
                            .then(res => {
                                if(res.code == 200) {
                                    this.$message.success(res.msg);
                                } else {
                                    let opt = []
                                    for(let i = 0; i < res.data.length; i++) {
                                        let obj = {}
                                        obj = `<p><i>${res.data[i]}</i></p>`
                                        opt[i] = obj
                                    }
                                    this.$notify.error({
                                        title: '错误',
                                        dangerouslyUseHTMLString: true,
                                        message: `${opt}`,
                                        duration: 0
                                    });
                                }
                            })
                            .catch(error => {
                                console.log(error.response.data);
                                console.log(error.response.status);
                                console.log(error.response.headers);
                            })
                    } else {
                        return false
                    }
                })
               
            }
        }
    }
</script>
<style lang="scss">
    .notice {
        width: 99%;
        height: auto;
        background-color: #fff;
        padding: 10px 10px 10px 10px;
        border-radius: 10px;
    }

    .noticeType {
        margin: 10px auto;
        width: 66%;
    }

    .transfer-footer {
        margin-left: 20px;
        padding: 6px 5px;
    }
</style>